<template>
  <div class="device_data_upload" v-loading="isDownload">
    <one-title title="设备数据上传" @refreshData="refresh">
      <div class="mes_btn">
        <disabled-btn
          v-btn-permission="'download'"
          :judge="downloadFileBtnStatus"
          iconClass="iconfont icon-download"
          btnText="批量下载"
          @judgeClick="downloadFile"></disabled-btn>
        <el-button
          v-btn-permission="'upload'"
          size="small"
          @click="showImport"
          type="success">
          <i class="iconfont icon-btn_export"></i>
          上传
        </el-button>
      </div>
    </one-title>
    <div class="fixed_top_56">
      <mes-search-comp
        :searchList="searchList"
        ref="mesSearch"
        :searchResult="searchCount"
        @searchInfo="_info">
      </mes-search-comp>
      <div class="table_container">
        <el-table
          ref="tableNode"
          v-loading="isLoading"
          border
          stripe
          :data="listData.list"
          :max-height="tableMaxHeight"
          @sort-change="_sort"
          @selection-change="handleSelectionChange"
          :row-class-name="({row}) => !selectData.some((item) => item.id === row.id) || 'line_selected'"
          @row-click="row => $refs.tableNode.toggleRowSelection(row)"
          tooltip-effect="dark">
          <el-table-column
            align="center"
            type="selection"
            :disabled="true"
            width="40">
          </el-table-column>
          <mes-col-comp
            :key="index"
            v-for="(column,index) in columnList"
            :column="column">
          </mes-col-comp>
          <el-table-column
            prop=""
            label="操作"
            show-overflow-tooltip
            align="center"
            fixed="right"
            :resizable="false"
            min-width="90">
            <template slot-scope="scope">
              <span class="jump_item"
                    v-if="(scope.row.fileName)"
                    @click.stop="$downByBlob(scope.row.uploadHistoryId, scope.row.fileName)">下载</span>
              <span class="jump_item is_disabled" v-else>下载</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <mes-pagination
        @updateData="init"
        :currentPage="listData.pageNo"
        :total="listData.count || 0"
        :pageSize="listData.pageSize"
        :morePage="[500]">
      </mes-pagination>
    </div>
    <!--上传-->
    <import-step ref="importStep" @upload="init"></import-step>
  </div>
</template>

<script>
import tableColumns from './tableColumns'
import ImportStep from './components/ImportStep'

let storeModule = 'deviceDataUpload'
export default {
  name: 'DeviceDataUpload',
  components: {
    ImportStep
  },
  data() {
    return {
      tableColConfig: tableColumns, // 列配置
      isLoading: false, // 是否加载
      selectItems: [], // 选中的数据
      searchData: [], // 搜索的数据
      searchCount: NaN, // 搜索结果数
      sortData: [], // 排序
      disable: '#a1b1c1',
      selectData: [],
      isDownload: false, // 是否批量下载
    }
  },
  computed: {
    // 列表查询
    listData() {
      return this.$store.state[storeModule].listData
    },
    // 搜索项
    searchList() {
      let searchList = this.tableColConfig || []
      return searchList
    },
    // 列循环
    columnList() {
      return this.tableColConfig.filter(item => item.noForCol !== true && item.isShow !== false)
    },
    // 文件id列表
    fileItemList() {
      return this.selectData.filter((item) => item.uploadHistoryId) || []
    },
    // 验证是否已选
    _selected() {
      if (!this.selectData.length) return {msg: '请选择一条记录！'}
    },
    // 获取序列号按钮状态
    downloadFileBtnStatus() {
      if (this._selected) return this._selected
      let status = false
      let msg = '请选择上传状态为"已上传"的记录'
      if (this.fileItemList.length === 0) {
        status = true
      }
      return status ? {disabled: status, msg: msg} : {msg: false}
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化
    init(page) {
      this.isLoading = true
      let postData = {
        method: 'post',
        url: 'a/deviceuploaddata/deviceUploadData/list',
        data: {
          pageNo: page ? page.pageNo : 1,
          pageSize: page ? page.pageSize : this.listData.pageSize || 15
        },
        module: storeModule,
        state: 'listData'
      }
      if (Object.keys(this.searchData).length > 0) {
        postData.data.query = this.searchData
      }
      if (Object.keys(this.sortData).length > 0) {
        postData.data.sort = this.sortData
      }
      this.$store.dispatch('saveData', postData).then((res) => {
        if (Object.keys(this.searchData).length > 0) {
          this.searchCount = res.count
        } else {
          this.searchCount = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 刷新
    refresh() {
      this.searchData = {} // 查询参数
      this.sortData = {} // 排序对象
      this.$refs.mesSearch.clean()
      this.$refs.tableNode.clearSort()
      this.init()
    },
    /**
     * 选择勾选
     * @param value
     */
    handleSelectionChange(value) {
      this.selectData = value
    },
    // 批量下载
    downloadFile() {
      const fileName = this.fileItemList[0].fileName
      const list = this.fileItemList.map((item) => item.uploadHistoryId)
      const ids = list.join('+')
      const filesName = this.moment(window.serverTime).format('YYYYMMDDHHmmss')
      if (list.length === 1) {
        this.$downByBlobLargeFile(ids, fileName, this.callbackFn)
      } else {
        this.$downByBlobLargeFile(ids, `设备数据${filesName}.zip`, this.callbackFn)
      }
    },
    // callback
    callbackFn() {
      this.isDownload = !this.isDownload
    },
    // 显示上传文件弹框
    showImport() {
      this.$refs.importStep.openDialog()
    },
    // 搜索
    _info(data) {
      this.searchData = data
      this.init()
    },
    // 排序
    _sort(obj) {
      this.sortData = this.$getSortOrder(obj)
      this.init()
    },
  }
}
</script>

<style scoped lang="less">
  .device_data_upload {
    .el-button--small {
      cursor: pointer;
      font-size: 14px !important;

      &.disicon {
        color: #a1b1c1;
        cursor: not-allowed;
      }
    }
  }
</style>
